<template>
    <div class="wrap">
        <nav class="info-nav">
            <div class="info-tabs">
                <a v-for="(item,index) of navs"
                   class="nav-item"
                   :class="{'active':nowIndex===index}"
                   @click="tabClick(index)">{{item.name}}<i></i>
                </a>
            </div>
        </nav>
        <div class="info-con">
            <ul>
                <li v-for="item in articleList" @click="selectArt(item)">
                    <div class="info-article" >
                        <a :href="'http://m.zhonghoumingde.com/info_detail/category/'+item.category_a+'/article/'+item.article_id" target="_blank" class="info-article-inner">
                            <img :src="item.image">
                            <div class="list-main">
                                <div class="head">{{item.title}}</div>
                                <div class="label">
                                    <i>日期：<span>{{item.created_at}}</span></i>
                                    <i>阅读：<span>{{item.read_number}}</span></i>
                                </div>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import IScroll from "iscroll"
/*import ListPullLoading from 'base/list-pull-loading/list-pull-loading'*/

export default {
    data(){
        return{
            nowIndex:0,
            navs:[
                {name:"政策文件"},
                {name:"产业动态"},
                {name:"小镇攻略"},
                {name:"田园综合体"},
                {name:"乡村振兴战略"},
                {name:"资本市场"},
                {name:"要闻推荐"},
                {name:"热门推荐"}
            ],
            articleList: []
        }
    },
    created: function() {
        this.getArtlist(this.nowIndex)
    },
    methods:{
        tabClick(index){
            this.nowIndex=index
            this.getArtlist(this.nowIndex)
        },
        getArtlist(nowIndex){
            setTimeout(() => {
              this.$axios.get('/api/articleList', {
                    params:{
                        'page': 1,
                        'limit' : 10,
                        'order' : nowIndex
                    }
                })
                .then((res) => {
                  this.articleList=res.data.data.artlist
                }, (err) => {
                  console.log(err)
                })
            }, 500)
        },
        selectArt(item){
            this.$router.push({
                path:'/info-detail',
                query:{
                    id:item.article_id,
                    category:item.category_a
                }
            })
        }
    }
}

</script>
<style scoped>
.info-nav{
    width:100%;
    height:40px;
    overflow: hidden;
    background: #fff;
    border-top:3px solid #f5f5f5;
    border-bottom: 1px solid #e7e7e7;
    position: fixed;
    left:0;
    top:49px;
    z-index: 500;
}
.info-tabs{
    width: 100%;
    height: 47px;
    line-height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: middle;
    -ms-flex-align: middle;
    align-items: middle;
    overflow-x: auto;
    overflow-y:hidden;
    padding:0 10px;
    box-sizing: border-box;
}
.info-tabs a{
    width: 25%;
    padding: 0 4px;
    display: inline-block;
    position: relative;
    text-align: center;
     -ms-flex-negative: 0;
    flex-shrink: 0;
}
.info-tabs .active{color:#3c7fd5;}
.info-tabs .active i{
    position: absolute;
    bottom:-1px;
    left:0%;
    z-index:5;
    width:100%;
    height:4px;
    display: inline-block;
    background:#3c7fd5;
    -ms-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    -webkit-transform:scale(.5);
    -ms-transform:scale(.5);
    transform:scale(.5);
}

.info-con{width: 100%;padding-top: 3rem;}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
.info-article{
    width: 310px;
    box-sizing: border-box;
    margin:16px auto 12px auto;

}
.info-article-inner{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}
.info-article img{
    width:100%;
    height: 160px;
    margin-bottom: 4px;
}
.info-article .list-main{
    width:100%;
}
.info-article .list-main .head{
    line-height: 30px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.info-article .list-main .label{
    font-size:13px;
    line-height: 22px;
}
.info-article .list-main .label i{
    font-style: normal;
    color: #333;
    display: inline-block;
    margin-right:20px;
}
.info-article .list-main .label i span{color: #666666;}
</style>
